<template>
<div class="form-con">
  <section class="product-border">
  <h2>常见问答</h2>
  <div class="faq">
    <ul class="faq-ul">
      <li v-for="(val,index) in faqList" :key="index">
        <label for="ask">问题{{ index+1 }}
          <el-input
            id="ask"
            v-model="val.question"
            maxlength="50"
            show-word-limit
            class="small-input"
          />
          <el-input
            v-model="val.answer"
            type="textarea"
            maxlength="200"
            rows="6"
            show-word-limit
            placeholder="请输入答案"
            class="small-input-left"
          />
        </label>
        <el-button  type="danger" :disabled="justFaqNoDelete" class="faq-delete" @click="deleteFaq(val,index)">删除</el-button>
      </li>
    </ul>
     <div class="form-middle">
        <el-button class="add-rule" @click="addFaq">添加一个问答</el-button>
        <el-button type="primary" icon="el-icon-document" @click="saveFaq">保存</el-button>   
    </div>
    
  </div>
  </section>
</div>
</template>

<script>
import {postProductFaqList,getProductFaqList,putProductFaqList,deleteProductFaq } from '@/api/product'
export default {
  name: 'Faq',
  props:['product_id'],
  data() {
    return {
     
      faqList: [{ 'question': '', 'answer': '' }],
    }
  },
  computed: {
   
    //常见问答只有一个就禁用删除，否则显示删除
    justFaqNoDelete(){
      if(this.faqList.length>1){
        return false;
      }
      else{
        return true;
      }
    },
    //判断是否是编辑页面
    isEdit(){
      return this.$route.path.includes('edit')
    },
  },
  /* watch: {
    faqNum(val) {
      if (val > 3) {
        this.isShowButton = true
      } else {
        this.isShowButton = false
      }
    }
  }, */
  created(){
    if(this.isEdit){
      this.getProductFaqlist(this.$route.params.id);
    }
  },
  methods: {
    //获取问答列表
    getProductFaqlist(id){
      getProductFaqList(id).then(res=>{
        if(res.code === 0){
            console.log(res);
            
            this.faqList = res.data
        }
      })
    },
    //保存faq问答
    saveFaq(){
      if(!this.isEdit){
        postProductFaqList(this.product_id,this.faqList).then(res=>{
          if(res.code === 0){
            this.getProductFaqlist(this.product_id);
            this.$notify({
                message: '添加产品常见问答成功',
                type: 'success',
                duration: 2000,
              })
          }
          
        })
      }else{
       /*  let dataList = this.faqList.filter(val=>{
                              return !val.id;    
                          })     */              
        putProductFaqList(this.$route.params.id,this.faqList).then(res=>{
          if(res.code === 0){
            this.getProductFaqlist(this.$route.params.id);
            this.$notify({
                message: '修改产品常见问答成功',
                type: 'success',
                duration: 2000,
              })
          }
          
        })
      }
     
      
    },
    // 添加问答
    addFaq() {
     
      
      this.faqList.push({ 'question': '', 'answer': '' })
    },
    //删除常见问答
    deleteFaq(val,index){
      let localDelete = this.faqList.some(val=>{
        return !val.id
      })
      this.$confirm('是否删除该问答?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(!localDelete){
            deleteProductFaq(val.id).then(res=>{
            if(res.code === 0){
              this.faqList.splice(index,1);
              this.$notify({
                message: '删除问答成功',
                type: 'success',
                duration: 2000,
              })
            }
          })
          }
          else{
            this.faqList.splice(index,1);
          }
          
           
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
      
    })
     
    },
    
  }
}
</script>

<style lang="scss" scoped>
.form-con{
    padding: 1% 10% 5% 0;
    .product-border{
    border: 1px solid #eee;
    
    margin-bottom: 20px;
    h2{
      background-color: #eee;
      margin: 0;
      padding: 10px 0 10px 20px;
    }
    
  }
  }
  .faq{
    position:relative;
  }
  .small-input{
    width:70%;
    margin:10px;
  }
  .small-input-left{
     width:70%;
    margin-left:55px;
  }
  .form-center{
    margin:0 auto;
  }
  .no-position-button{
    position:fixed;
    right:20px;
    bottom:50px;
  }
  .faq-ul{
    background-color: #eee;
    padding-bottom: 10px;
    li{
      margin-bottom: 10px;
      position: relative;
      .faq-delete{
        position: absolute;
        right: 10%;
        top: 40%;
      }
    }
  }
  .form-middle{
    background-color: #fff;
    padding-left: 95px;
    margin-bottom: 20px;
  }
</style>
